<script>
    $(document).ready(function() {
        $('#datepicker1').datepicker();
        $('#datepicker2').datepicker();
    });

    function formatMoney(money, c, d, t) {
        var n = money,
                c = isNaN(c = Math.abs(c)) ? 2 : c,
                d = d === undefined ? "," : d,
                t = t === undefined ? "." : t,
                s = n < 0 ? "-" : "",
                i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
                j = (j = i.length) > 3 ? j % 3 : 0;
        return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
    }

    function guestSearch() {
        window.open('<?php echo base_url(); ?>reservation/guestSearch/', '', 'toolbar=no,location=no,menubar=no,scrollbars=yes,width=850,height=500');
    }

    function roomSearch() {
        $.post('<?php echo base_url(); ?>reservation/roomSearchAjax/', {
            checkin: $('#date1').val(),
            checkout: $('#date2').val(),
            adult: $('#adult').val(),
            child: $('#child').val(),
            infant: $('#infant').val()
        }, function(data) {
            $('#listRoom').html('');
            $.each(data, function(key, value) {
                $('#listRoom').append('<tr>');
                $('#listRoom').append('<td>' + data[key].room_number + '</td>');
                $('#listRoom').append('<td>' + data[key].room_type_name + '</td>');
                $('#listRoom').append('<td>Rp ' + formatMoney(data[key].room_type_price, 2) + '</td>');
                $('#listRoom').append('<td><a href="javascript:void(0)" class="btn btn-primary" onclick="listPrice(' + data[key].room_number + ');">Pilih</td>');
                $('#listRoom').append('</tr>');
            });
            $('#modalRoom').modal('show');
        }, 'json');
    }

    function listPrice(rn) {
        $.post('<?php echo base_url(); ?>reservation/roomPriceAjax/', {
            checkin: $('#date1').val(),
            checkout: $('#date2').val(),
            room_number: rn
        }, function(data) {
            $('#listPrice').html('');
            var number = 0;

            for (var d = new Date($('#date1').val()); d < new Date($('#date2').val()); d.setDate(d.getDate() + 1)) {

                var tanggal = d.getFullYear() + '-' + ("0" + (d.getMonth() + 1)).slice(-2) + '-' + ("0" + d.getDate()).slice(-2);
                $('#listPrice').append('<tr>');
                $('#listPrice').append('<td class="tgl">' + tanggal + '</td>');
                $('#listPrice').append('<td class="rn">' + data[0].room_number + '</td>');
                $('#listPrice').append('<td>' + data[0].room_type_name + '</td>');

                var hasRate = false;
                var datax = new Array();
                var a = 0;
                $.each(data, function(key, value) {
                    if (value.room_rate_date === tanggal) {
                        hasRate = true;
                        datax[a] = [value.rate_type_id, value.rate_type_name, value.room_rate_price];
                        a++;
                    }
                });

                $('#listPrice').append('<td><select name="rate[]" id="select' + number + '" class="select"></select></td>');
                $('#select' + number).append('<option value="" onclick="changeRate(' + number + ',' + data[0].room_type_price + ')">---</option>');
                $('#listPrice').append('<td id="harga' + number + '" name="harga[]" class="harga">' + data[0].room_type_price + '</td>');

                if (hasRate === true) {
                    $.each(datax, function(key, value) {
                        $('#select' + number).append('<option value="' + value[0] + '" onclick="changeRate(' + number + ',' + value[2] + ');">' + value[1] + '</option>');
                    });
                }

                number++;
            }
            doTotal();
            $('#modalRoom').modal('hide');
        }, 'json');
    }

    function changeRate(td, price) {
        $('#harga' + td).html(price);
        doTotal();
    }

    function doTotal() {
        var total = 0;
        $('#listPrice .harga').each(function()
        {
            total = parseInt($(this).html()) + total;
        });
        $('.total').html(total);
    }

    function post() {
        var tgl = [];
        var rn = [];
        var prc = [];
        var rt = [];
        
        $(' .tgl').each(function(){
             tgl.push($(this).html());
        });
        
        $(' .rn').each(function(){
             rn.push($(this).html());
        });
        
        $(' .harga').each(function(){
             prc.push($(this).html());
        });
        
        $(' .select').each(function(){
             rt.push($(this).val());
        });
        
        $.post('<?php echo base_url(); ?>reservation/save/',{
            guest_id: $("#guest_id").val(),
            status: $("#status").val(),
            checkin: $('#date1').val(),
            checkout: $('#date2').val(),
            adult: $('#adult').val(),
            child: $('#child').val(),
            infant: $('#infant').val(),
            rate_type: rt,
            tanggal: tgl,
            room_number: rn,
            price: prc
        }, function(){
        window.location.replace("../reservation");
        });
    }
</script>

<form action="<?php echo base_url(); ?>reservation/save/" method="post">
    <table class="table table-hover table-condensed">
        <tr>
            <td>Guest</td>
            <td><input type="text" id="guest_name" name="guest_name" class="input" disabled> <a class="btn btn-success" href="javascript:void(0)" onclick="guestSearch();" ><i class="icon-search icon-white  "></i></a></td>
        </tr>
        <tr>
            <td>Status</td>
            <td>
                <select name="status" id="status">
                    <option value="3">Booking</option>
                    <option value="2">Check In</option>
                </select> 
            </td>
        </tr>
        <tr>
            <td>Check In Date</td>
            <td>
                <div class="input-append date" id="datepicker1" data-date="" data-date-format="yyyy-mm-dd">
                    <input id="date1" type="text" name="checkin" disabled>
                    <span class="add-on">
                        <i class="icon-th">
                        </i>
                    </span>
                </div>
            </td>
        </tr>
        <tr>
            <td>Check Out Date</td>
            <td>
                <div class="input-append date" id="datepicker2" data-date="" data-date-format="yyyy-mm-dd">
                    <input id="date2" type="text" name="checkout" disabled>
                    <span class="add-on">
                        <i class="icon-th">
                        </i>
                    </span>
                </div>
            </td>
        </tr>
        <tr>
            <td>Total Adult</td>
            <td><input id="adult" type="number" name="jml_dewasa"></td>
        </tr>
        <tr>
            <td>Total Child</td>
            <td><input id="child" type="number" name="jml_anak"></td>
        </tr>
        <tr>
            <td>Total Infant</td>
            <td><input id="infant" type="number" name="jml_bayi"></td>
        </tr>
        <tr>
            <td>Room Number</td>
            <td><a href="javascript:void(0)" class="btn btn-success" onclick="roomSearch();"><i class="icon-search icon-white  "></i></a></td>
        </tr>
        <tr>
            <td>Room Cost List</td>
            <td>
                <table class="table table-condensed table-hover">
                    <thead>
                        <tr>
                          <th>Date</th>
                          <th>Room Number</th>
                          <th>Type</th><th>Rate</th>
                          <th>Price</th></tr>
                    </thead>
                    <tbody id="listPrice">
                    </tbody>
                    <tfoot>
                        <tr><td></td><td></td><td></td>
                        <td>Total Cost</td><td class="total"></td></tr>
                    </tfoot>
                </table>
            </td>
        </tr>
    </table>
    <input type="hidden" name="guest_id" id="guest_id" value="">
    <a class="btn btn-primary" onclick="post();">Save</a>
</form>

<div id="modalRoom" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="myModalLabel">Available Room</h3>
    </div>
    <div class="modal-body">
        <table class="table">
            <thead>
                <tr>
                  <th>Room Number</th>
                  <th>Room Type</th>
                  <th>Price</th>
                  <th>Chose</th></tr>
            </thead>
            <tbody id="listRoom">

            </tbody>
        </table>
        <input type="hidden" id="room_rate" name="rate_type_id" value="" />
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
    </div>
</div>